<template>
<div>
    <el-form ref="tform" :rules="rules" :model='dataForm' label-width="80px">
        <el-form-item label="公司名称" prop="company">
            <el-input v-model="dataForm.company" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="name">
            <el-input v-model="dataForm.name" placeholder="请输入负责人"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="dataForm.phone" placeholder="请输入负责人手机号"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
            <el-input v-model="dataForm.address" type="textarea" placeholder="请输入联系地址" style="width:70%;"></el-input>
        </el-form-item>
        <el-form-item label="工艺">
<el-select v-model="dataForm.tech_id" filterable placeholder="请选择工艺">
            <el-option
              v-for="item in techs"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>       
      </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input v-model="dataForm.remark" type="textarea" placeholder="请输入备注" style="width:70%;"></el-input>
        </el-form-item>

    </el-form>

</div>
</template>

<script>
import headTop from "@/components/headTop";
import {
    insertCraft,
    updateCraft,
    getTechList
} from "@/api/getData";
export default {
    inject: ["reload"],
    data() {
        return {
            isEdit: false,
            rules: {
                name: [{
                    required: true,
                    message: "请输入负责人姓名",
                    trigger: "blur"
                }],
                phone: [{
                        required: true,
                        message: "请输入手机号",
                        trigger: "blur"
                    }
                ],
                company: [{
                    required: true,
                    message: "请输入公司名称",
                    trigger: "blur"
                }],

            },
            techs:[]
        };
    },
    created() {
      getTechList().then((res)=>{
          if (res.code == 200) {
              this.techs = res.data.list;
          }
      });
    },
    props: ['dataForm'],
    components: {

    },
    methods: {
        onInsert() {
            this.isEdit = false;
            this.vilateForm();
        },
        onUpdate() {
            this.isEdit = true;
            this.vilateForm();
        },
        vilateForm() {
            this.$refs['tform'].validate(async valid => {
                if (valid) {
                    if (this.isEdit) {
                        this.updateCrafts();
                    } else {
                        this.insertCrafts();
                    }
                } else {
                    this.$notify.error({
                        title: "错误",
                        message: "请检查输入是否正确",
                        offset: 100
                    });
                    return false;
                }
            });
        },
        resetFields() {
            this.$refs['tform'].resetFields();
        },
        async insertCrafts() {
            try {
                let params = this.dataForm;
                const result = await insertCraft(params);
                if (result.code == 200) {
                    this.$message("添加成功");
                    this.$emit('insertSuccess')
                } else {
                    throw new Error("获取数据失败");
                }
            } catch (err) {
                console.log("获取数据失败", err);
            }
        },
        async updateCrafts() {
            let params = this.dataForm;
            updateCraft(params).then((res) => {
                    if (res.code == 200) {
                        this.$message("修改成功");
                        this.$emit('insertSuccess')
                    }
                })
                .catch((err) => {

                });
        },
        changeSwitch(data) {
            console.log(data);
        }
    }
};
</script>

<style lang="less" scoped>
.el-form .el-input {
    width: 70%;

}

.el-form {
    margin: 10px;
}
</style>
